<script lang="ts" setup>
import { ref } from 'vue'

//数据
const props = defineProps(["modelValue", "selectArr", "showList","userData"]);
const emit = defineEmits(["update:modelValue", "selectChange", "onSelect", "clearArr"]);
const optionVal = defineModel('firstName')
console.log(props.userData);

const optionName = ref("");
let delData = ref({});
const isAdding = ref(false);

const selectChange = () => {
    emit("selectChange");
}

const onSelect = (item) => {
    emit("onSelect", item);
}

const clearArr = (item) => {
    delData.value = item;
    optionVal.value = { id: '', vlaue: "", label: '' }
    emit("clearArr", item)
    // emit("update:modelValue",'')
    console.log('delData.value: ', delData.value);
}

const onAddOption = () => {
    isAdding.value = true;
};

const onConfirm = () => {
    if (optionName.value) {
        props.selectArr.push({
            id: optionName.value.length + 1,
            label: optionName.value,
            value: optionName.value,
        });
        clear();
    }
};
const clear = () => {
    optionName.value = "";
    isAdding.value = false;
};
</script>
<template>活动选择：
    <el-select v-model="optionVal" placeholder="请选择" style="width: 240px" @change="selectChange">
        <el-option class="option" :value="item.value" v-for="item in props.selectArr" :key="item.id" :label="item.label"
            >
            <span style="float: left" @click="onSelect(item)">{{item.label}}</span>
            <span style="float: right" @click="clearArr(item)" v-if="props.userData.role[0] == 3">
                <el-icon>
                    <Close />
                </el-icon> 
            </span>
        </el-option>
        <template #footer v-if="props.userData.role[0] == 3">
            <span v-if="!isAdding" text bg size="small" @click="onAddOption">
                新建分组
            </span>
            <template v-else>
                <el-input v-model="optionName" class="option-input" placeholder="请输入新的分支" size="small"
                    style="margin-bottom: 7px" />
                <div>
                    <el-button type="primary" size="small" @click="onConfirm">
                        确定
                    </el-button>
                    <el-button size="small" @click="clear">取消</el-button>
                </div>
            </template>
        </template>
    </el-select>
</template>
<style scoped>
 .option span:nth-child(1){
    width: 90%;
 }
 .option span:nth-child(2){
    width: 5%;
 }
</style>